<template>
  <div class="money container" v-if="userInfo">
    <Money />
    <div class="tabs">
      <div class="tab" :class="{ active: index === activeIndex }" v-for="(item, index) in tabList"
        @click="changeAvtive(index)">
        <img :src="item.icon" />
        <div>{{ item.name }}</div>
      </div>
    </div>
    <div v-if="record && record.length > 0">
      <div class="list" v-if="activeIndex === 0">
        <div class="list-item" v-for="item in record">
          <div class="list-item-top">
            <div class="list-item-top-left">
              <div class="txt">奖励佣金</div>
              <div :class="['btn' + item.busiStatus]">{{ getStatus(item.busiStatus) }}</div>
            </div>
            <div class="list-item-top-money">+ {{ item.divideMoney }}</div>
          </div>
          <div class="list-item-middle">
            <div>学员：{{ item.telephone }}</div>
            <div>类目：{{ item.productName }}</div>
          </div>
          <div class="list-item-bottom">
            <div>{{ item.payTime.slice(0, -2) }}</div>
            <div>￥{{ item.payMoney }}</div>
          </div>
        </div>
      </div>
      <div class="list" v-else>
        <div class="list-item" v-for="item in record">
          <div class="list-item-top">
            <div class="list-item-top-left">
              <div class="txt">提现金额</div>
              <div :class="['btn' + item.busiStatus]">{{ getStatus(item.busiStatus) }}</div>
            </div>
            <div class="list-item-top-money">+ {{ item.amountMoney }}</div>
          </div>
          <div class="list-item-middle-container" v-for="inneritem in item.divideRecords">
            <div style="width: 60vw;">
              <div class="list-item-middle">
                <div>学员：{{ inneritem.telephone }}</div>
                <div>类目：{{ inneritem.productName }}</div>
              </div>
              <div class="list-item-bottom">
                <div>{{ inneritem.payTime.slice(0, -2) }}</div>
                <div>￥{{ inneritem.payMoney }}</div>
              </div>
            </div>
            <div v-if="inneritem.subPromoterName">
              <div class="divideMoney">{{ inneritem.subPromoterName }}</div>
              <div class="divideMoney">佣金：{{ inneritem.divideMoney }}</div>
            </div>
          </div>
  
        </div>
      </div>
    </div>
    <van-empty description="没有相关代数据" v-else>
    </van-empty>
  </div>
  <van-empty description="请登录，体验完整功能" v-else>
    <van-button round type="primary" class="bottom-button" @click="goLogin">登 录</van-button>
  </van-empty>
</template>
<script lang="ts">
// @ts-nocheck
import { ref } from "vue";
import { requireImg } from "@/assets/imgUrl";
import Money from '@/components/Money.vue'
import { getDivideRecord, getCashRecord } from '@/api/record';
import { useRouter } from "vue-router";

export default {
  name: "App",
  setup() {
    const activeIndex = ref(0);
    const isLoading = true;
    const userInfo = window.userInfo && window.userInfo.userInfo
    const tabList = [{
      name: '分账记录',
      icon: requireImg('money/record0.png')
    }, {
      name: '提现记录',
      icon: requireImg('money/record1.png')
    }, {
      name: '待审核',
      icon: requireImg('money/record2.png')
    }, {
      name: '驳回',
      icon: requireImg('money/record3.png')
    }]
    const router = useRouter()
    const goLogin = () => {
      router.push({ path: '/login' })
    }
    return {
      isLoading,
      tabList,
      activeIndex,
      userInfo,
      goLogin
    };
  },
  data() {
    return {
      record: []
    }
  },
  mounted() {
    if (window.userInfo && window.userInfo.userInfo) {
      this.getDivideRecord()
    }
  },
  components: {
    Money
  },
  methods: {
    getStatus(status) {
      let value = ''
      if (status == 0) {
        value = '可提现'
      } else if (status == 1) {
        value = '审核中'
      } else if (status == 2) {
        value = '已提现'
      }

      return value
    },
    bindWechat() {
      if (this.userInfo) {
        console.log('openid == ', window.openId)
      }
    },
    getDivideRecord() {
      getDivideRecord().then(res => {
        this.record = res;
      })
    },
    getCashRecord(type) {
      getCashRecord({
        busiStatus: type
      }).then(res => {
        this.record = res;
      })
    },
    getDivideRecord() {
      getDivideRecord().then(res => {
        this.record = res;
      })
    },
    changeAvtive(index) {
      this.record = [];
      this.activeIndex = index
      console.log(this.activeIndex)
      if (this.activeIndex === 0) {
        this.getDivideRecord()
      } else {
        let type = ''
        if (index == 1) { //全部
          type = ''
        } else if (index == 2) {
          type = 1
        } else if (index == 3) {
          type = 3
        }
        this.getCashRecord(type)
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.money {
  padding-top: 20px;

  .tabs {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;

    .tab {
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border-radius: 6px;
      padding: 5px 10px;
      border: 1px solid transparent;

      img {
        width: 12px;
        margin-right: 5px;
      }
    }

    .active {
      border: 1px solid #4F6DF2;
    }
  }

  .list {
    height: calc(100vh - 80vw);
    overflow: auto;

    .list-item {
      background: #FFFFFF;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px -2px 8px -2px rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      padding: 10px 20px;
      margin-bottom: 10px;

      .list-item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .list-item-top-left {
          display: flex;
          font-size: 12px;
          align-items: center;

          .txt {
            font-size: 14px;
            font-weight: 400;
            margin-right: 5px;
          }

          .btn0 {
            background: #F4F6FF;
            border-radius: 6px;
            border: 1px solid #4F6DF2;
            padding: 2px 6px;
          }

          .btn1 {
            background: #FFF7F4;
            border-radius: 6px;
            border: 1px solid #F2854F;
            padding: 2px 6px;
          }

          .btn2 {
            background: #F7FAFF;
            border-radius: 6px;
            border: 1px solid #9599A1;
            padding: 2px 6px;
          }
        }

        .list-item-top-money {
          font-size: 16px;
          font-weight: bold;
        }
      }

      .list-item-middle-container {
        border-bottom: 1px solid #F6F6F6;
        display: flex; align-items: center;
        justify-content: space-between;
      }

      .list-item-middle {
        font-size: 12px;
        color: #9599A1;
        display: flex;
        justify-content: space-between;
      }
      .divideMoney {
        font-size: 12px;
        color: #9599A1;
      }

      .list-item-bottom {
        font-size: 12px;
        color: #9599A1;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>